<template>
  <view class="login">
    <nut-popup position="bottom" :style="{ width: '100%', height: '70%' }" round v-model:visible="agreement" :closeable="true">
      <view class="contents">
        <h2>盛辉服务协议及隐私政策</h2>
        <view class="text tk">
          <p> 1、托运人应如实告知承运人所托运货物的名称、性质、重量、数量、价值等必要信息，准确申报或填写、认真核对承运单信息，对承运单所填写内容之真实性负责；若托运人所提供的收货人信息等错误造成交货延迟或损失的，承运人不承担任何责任。</p>
          <p> 2、托运人应对所托货物按照行业标准妥善包装，使其适合运输。托运人不得托运或在所托运货物中夹带危险品、国家禁止运输的物品（包含但不仅限于假冒伪劣产品）；并不得隐瞒或夹带承运单所填报货物名称之外的物品。否则承运人有权随时随处卸货，因此发生的后果由托运人自负，并由托运人赔偿给承运人造成的一切损失。</p>
          <p> 3、收货人在收到提货或送货通知后最迟应在3日内提货或安排接收货物逾期应支付超出天数的仓储费和保管费，轻货按照5元/m³/天收取，重货按照15元/T/天收取，两者相比取最大值作为收费标准，最低5元每票。凡逾期超过30日，承运人有权视情对货物进行处理，由此产生的相应损失承运人不予承担赔偿责任。</p>
          <p> 4、托运人或收货人无故不支付费用的，承运人可以对承运货物行使留置权及其他补救性权利，由此而产生的后果由托运人或收货人承担。</p>
          <p> 5、托运人有权选择办理货物保价运输，保价费按货物价值的0.4%收取，最低5元每票。托运人选择保价运输的，货物全部灭失，按货物保价声明价值赔偿；货物部分毁损或灭失，按声明价值的损失比例赔偿；声明价值高于实际价值的，按实际价值赔偿；若货物损坏进行修复的，按实际修复费进行赔偿。托运易碎品托运人应妥善进行防护性包装，若运输途中发生破损，除能证明该破损系承运人造成包装物破坏致使托运货物损失外，承运人不承担赔偿责任。</p>
          <p> 6、未办理保价运输而发生货物灭失或损坏的，每件货物价值在300元以内的按货物的实际损失赔偿；每件货物价值超过300元的，承运人对每件货物的最高赔偿额不超过300元。按以上方式计算得出的赔偿额超过货物实际价值的部分无效。</p>
          <p> 7、托运人委托承运人代收货款不代表该次货物的实际价值，如果承运货物出现损坏或灭失的赔偿额应按照承运单第5、6条约定赔偿，与代收货款无关。</p>
          <p> 8、收货人签收货物后，表明货物已完好无损交付，自签收之时起该货物的损坏、短缺、灭失、污染、变质等一切风险和责任转移至收货人处，与承运人无关。</p>
          <p> 9、凡因承运单或与承运单有关的争议，当事人可以通过协商或调解解决，协商或调解不成，双方同意由福州市晋安区人民法院管辖。</p>
        </view>
        <view class="tkbutton">
          <view class="but" @click="agree">同意本条款，下次不再提醒</view>
        </view>
      </view>
    </nut-popup>
    <view class="login_logo">
      <image src="../../assets/images/index/login/logo.png"></image>
    </view>

    <button type="default" plain open-type="getPhoneNumber" @getphonenumber="doLogin" class="login_button_2" v-if="clause">
      <image mode="widthFix" src="../../assets/images/index/login/loginBtn1.png"></image>
    </button>
    <button type="default" plain @click="doLogin" class="login_button_2" v-else>
      <image mode="widthFix" src="../../assets/images/index/login/loginBtn1.png"></image>
    </button>
<!--    <button type="default" plain @click="doLogin" class="login_button_2">-->
<!--      <image mode="widthFix" src="../../assets/images/index/login/loginBtn1.png"></image>-->
<!--    </button>-->
    <view class="login_register" @click="showRegistration">
      <image src="../../assets/images/index/login/phoneIcon.png"></image>
      <text>
        手机号登录/注册
      </text>
    </view>
    <view class="login_clause">
      <nut-checkbox v-model="clause" label="">
        <text>我已阅读并同意</text>
      </nut-checkbox>
      <view style="color: #0966FF;"  @click.prevent="readClause">《盛辉服务协议及隐私政策》</view>
    </view>
    <registration v-model:state="state"></registration>
  </view>
  <view> <button @click="toWorkLogin">跳转工作人员登录</button></view>
</template>

<script setup lang="ts">
import { defineComponent, getCurrentInstance, reactive, ref } from "vue";
import registration from "./components/registration.vue";
import { getLogin } from "@/@api/login";
import Taro,{useRouter} from "@tarojs/taro";
import useUserInfoStore from "@/store/user";

const userStore = useUserInfoStore()

//用户协议开关
const agreement = ref<boolean>(false);
const agree = ()=>{
    agreement.value = false
    clause.value = true
}
const clause = ref<boolean>(false);
const showRegistration = () => {
  if(!clause.value){
    Taro.showToast({
      icon: 'none',
      title: '请阅读相关服务协议和隐私政策',
    })
    return
  }
  state.isVisible = true;
};
const state = reactive<{
  isVisible: boolean;
}>({
  isVisible: false,
});

const readClause = () => {
  agreement.value = true;

};

function toWorkLogin(){
  Taro.reLaunch({
    url:'/pages3/login/index'
  })
}


function getWxUserInfo() {
  return new Promise((resolve,reject)=>{
    Taro.getUserInfo({
      success: function(res) {
        if(res.userInfo){
          resolve(res.userInfo)
        }
        else{
          reject('error')
        }
      },
      fail: (err)=>{
        reject(err)
      }
    })
  })
}





const doLogin = async (e) => {
  if(!clause.value){
    Taro.showToast({
      icon: 'none',
      title: '请阅读相关服务协议和隐私政策',
    })
  }
  else {
    if(e.detail.errMsg !== "getPhoneNumber:ok"){
      return
    }
    //let wxUserInfo:any = await getWxUserInfo()
    Taro.login({
      success: function (res) {
        if (res.code) {
          let postData = {
            code: res.code,
            phoneCode: e.detail.code,
            iv: e.detail.iv,
            encryptedData: e.detail.encryptedData,
            //avatar: wxUserInfo.avatarUrl || '',
          };
          console.log(JSON.stringify(postData),665665)
          try {
            getLogin(postData).then((result:any)=>{
              Taro.setStorageSync('openid', result.openid)
              userStore.setOpenid(result.openid)
              Taro.setStorageSync('userToken', result.token)
              userStore.setToken(result.token)
              let userInfoData = {
                ...result.customerInfo,
              }
              Taro.setStorageSync('userInfo', JSON.stringify(userInfoData))
              userStore.setUserInfo()
              Taro.showToast({
                icon: 'success',
                title: '登录成功',
                duration: 1000,
                success: ()=>{
                  setTimeout(()=>{
                    if(!useRouter().params.url){
                      Taro.reLaunch({
                        url: "/pages/index/index",
                      })
                    }
                    else{
                      Taro.reLaunch({
                        url: decodeURIComponent(useRouter().params.url||''),
                      })
                    }
                  },1000)
                }
              })

            })
          } catch (error) {
            if (error == "未注册") {
              state.isVisible = true;
            }
          }
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      },
      fail: (err) => {
        console.log(err, 77);
      },
    })
  }

};


function checkLogin() {
  if(!!Taro.getStorageSync('userToken')){
    userStore.setOpenid(Taro.getStorageSync('openid'))
    userStore.setToken(Taro.getStorageSync('userToken'))
    userStore.setUserInfo(JSON.parse(Taro.getStorageSync('userInfo')||'{}'))
    Taro.reLaunch({
      url: "/pages/index/index",
      // url:'/pages3/index/index'
    })
  }

}


checkLogin()
</script>

<style lang="scss">
// @import "xxx";
// @import url(xxx);

.contents {
  width: 100%;
  height: 100%;
  h2 {
    height: 12%;
    width: 100%;
    display: flex;
    align-items: center;
    margin-left: 20rpx;
    font-weight: 700;
  }
  .text {
    width: 100%;
    height: 75%;
    overflow: auto;
    background-color: #f4f5f6;
    box-sizing: border-box;
    padding: 20rpx;
    &.tk {
      padding: 32rpx;
      font-size: 24rpx;
      p:last-child {
        margin-bottom: 32rpx;
      }
    }
  }
  .button {
    width: 700rpx;
    background: linear-gradient(90deg, #0966ff 2%, #0658de 99%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    height: 100rpx;
    border-radius: 50rpx;
    margin-left: 25rpx;
    font-family: PingFang SC;
    font-size: 32rpx;
    position: fixed;
    bottom:0;
  }
  .tkbutton {
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 140rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    .but {
      width: 700rpx;
      background: linear-gradient(90deg, #0966ff 2%, #0658de 99%);
      color: white;
      height: 100rpx;
      border-radius: 50rpx;
      font-family: PingFang SC;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20rpx;
    }
  }
}
.login {
  .login_logo {
    text-align: center;
    padding-top: 192rpx;

    image {
      width: 208rpx;
      height: 236rpx;
    }
  }

  .login_button {
    width: 620rpx;
    height: 88rpx;
    // border-radius: 88rpx;
    // background: #07C160;
    margin: 124rpx auto 48rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
  .login_button_2 {
    width: 620rpx;
    height: 88rpx;
    padding: 0;
    border-radius: 44px;
    border: none;
    margin: 124rpx auto 48rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .login_register {
    text-align: center;

    image {
      width: 28rpx;
      height: 28rpx;
      vertical-align: middle;
    }

    text {
      color: #999;
      font-size: 22rpx;
    }
  }

  .login_clause {
    position: absolute;
    width: 100%;
    bottom: 140rpx;
    display: flex;
    justify-content: center;
    z-index: 1;
    --nut-checkbox-label-margin-left: 10rpx;
  }
}
</style>
